<template>
	<view class="container" :style="theme">
		<view class="head">
			<image v-if="cont.courseImage" class="banner" :src="cont.courseImage" mode="widthFix"></image>
			<view class="head-cont">
				<view class="title">
					<!-- <text>视频课</text> -->{{cont.courseName}}
				</view>
				<view class="info">{{cont.introduction}}</view>
				<!-- <view class="time">培训时间：2022/04/01至2022</view> -->
			</view>
		</view>
		<view class="card">
			<view style="width: 50%;">
				<u-tabs :list="list1" @click="clickBtn"></u-tabs>
			</view>
			<view v-if="active==1" class="cont">
				<u-parse :content="cont.des"></u-parse>
			</view>
			<view v-else class="cont">
				<view class="collapse mb3" v-for="(item, index) in directoryList" :key="index">
					<view class="collapse_head flex flex_between" @click="showBtn(index)">
						<view class="collapse_head_left">
							<view class="collapse_bt">
								{{item.directoryName}}
							</view>
							<view v-if="item.videoList&&item.videoList.length>0" class="collapse_xbt">
								{{item.videoList.length}}课时
							</view>
						</view>
						<u-icon size="30rpx" color="#333" :name="item.show?'arrow-up-fill':'arrow-down-fill'" />
					</view>
					<view v-if="item.show" class="videoUl">
						<view class="videoLi flex-cb" v-for="(items, indexs) in item.videoList" :key="indexs"
							@click="showVideoBtn(items)">
							<text>{{indexs + 1}}.{{items.videoName}}</text>
							<image :src="imgHost+'/btn_play.png'"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="cont.status=='2'" class="bottomState">
			<view v-if="cont.status=='2' && cont.applyStatus == '0'" class="registerNow" @click="bmBtn">
				我要报名￥{{cont.price}}</view>
			<view v-if="cont.status=='2' && cont.applyStatus == '1' && cont.payStatus == '0'" class="registerNow"
				@click="zfBtn">去支付</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				noClick: true,
				cont: {},
				active: 1,
				id: '',
				directoryList: [],
				show: false,
				list1: [{
					name: '详情',
				}, {
					name: '目录',
				}]
			}
		},
		onLoad(ops) {
			this.id = ops.id
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jump3(url, params, a) {
				this.$app.jump3(url, params, a);
			},
			zfBtn() {
				this.jump3('/pages/order/pay?type=2&orderId=', this.cont.orderId)
			},
			bmBtn() {
				this.$app.ajax({
					api: this.$api.enrolCourse(),
					data: {
						userId: this.userInfo.id,
						param: {
							courseId: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						let orderId = res.record.orderId
						this.$app.showToast('报名成功')
						setTimeout(()=>{
							this.jump3('/pages/order/pay?type=2&orderId=', orderId)
						},1000)
					}
				}).catch(() => {})
			},
			showVideoBtn(e) {
				if (e.videoUrl) {
					this.jump('/pages/video/index?src=', e.videoUrl)
				} else {
					this.$app.showToast('请先完成课程报名')
				}
			},
			clickBtn(item) {
				this.active = item.index + 1
			},
			showBtn(index) {
				let arr = [...this.directoryList]
				arr[index].show = !arr[index].show
				this.directoryList = arr
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.infoCourseMini(),
					data: {
						userId: this.userInfo.id,
						param: {
							courseId: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.cont = res.record
						let arr = res.record.directoryList || []
						arr.forEach((e) => {
							e.show = false
						})
						this.directoryList = arr
					} else {
						setTimeout(()=> {
							uni.navigateBack({
								delta:1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		}

	}
</script>
<style scoped lang="scss">
	.container {
		padding-bottom: 150rpx;
	}

	.head {
		background-color: #ffff;
		margin-bottom: 24rpx;
	}

	.banner {
		width: 100%;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.swiper-items {
		height: 100%;
		font-weight: 400;
		font-size: 27rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.swiper-item image {
		width: 100%;
	}

	.head-cont {
		padding: 30rpx;
	}

	.head-cont .title {
		font-size: 34rpx;
		font-weight: 500;
		color: #222222;
		margin-bottom: 20rpx;
		line-height: 44rpx;
	}

	.head-cont .title text {
		height: 44rpx;
		background: linear-gradient(270deg, #6DB8EC 0%, #4085DD 100%);
		border-radius: 8rpx;
		display: inline-block;
		padding: 0 10rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		color: #ffff;
	}

	.head-cont .info {
		font-size: 24rpx;
		font-weight: 400;
		color: #555555;
		margin-bottom: 20rpx;
		line-height: 36rpx;
	}

	.head-cont .time {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 1.5;
	}


	.card {
		background-color: #ffff;
		margin-bottom: 24rpx;
	}

	.cont {
		padding: 30rpx;
	}

	.bmry {
		display: flex;
		flex-wrap: wrap;
	}

	.bottomState {
		width: 100%;
		padding: 16rpx 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.registerNow {
		height: 100rpx;
		text-align: center;
		color: #fff;
		background-color: $color;
		font-size: 30rpx;
		border-radius: 10rpx;
		line-height: 100rpx;
	}

	.catalogue {
		margin-bottom: 24rpx;
		display: block;
	}

	.catalogue-left .bt {
		font-size: 30rpx;
		font-weight: bolder;
		color: #222222;
		line-height: 1.5;
	}

	.catalogue-left .ks {
		color: #999999;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.cancel {
		height: 100rpx;
		text-align: center;
		color: #666666;
		border: 1px solid #999999;
		font-size: 30rpx;
		border-radius: 50rpx;
		line-height: 100rpx;
	}

	.jxz {
		height: 100rpx;
		text-align: center;
		color: #fff;
		border: 1px solid #4F76D4;
		background-color: #4F76D4;
		font-size: 30rpx;
		border-radius: 50rpx;
		line-height: 100rpx;
	}

	.collapse {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 30rpx 40rpx;

		.collapse_head {
			.collapse_head_left {
				.collapse_bt {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: Medium;
					color: #222222;
				}

				.collapse_xbt {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-top: 20rpx;
				}
			}
		}

		.videoUl {
			border-top: 1px solid #E5E5E5;
			margin-top: 20rpx;
			padding-top: 20rpx;
		}

		.videoLi {
			font-size: 26rpx;
			width: 100%;
			color: #222222;
			line-height: 1.5;
			height: 70rpx;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
</style>
